<template>
	<view style="background: #fff;min-height: 100vh;" class="Afont"
		:style="{background:'url('+Imgbase+'/winter_goodpoor_bgc.png)','background-size':'100%',}">

		<view class="padding-top-50 padding-left-40 ">
			<view class="">
				<image class="w-80 h-80" :src="Imgbase + '/winter_goodpoor_img1.png'" mode="aspectFit" @click="back">
				</image>
			</view>
		</view>

		<view class="w-660 h-1200 margin-auto margin-top-30 padding-35 overhid"
			:style="{background:'url('+Imgbase+'/new_goodmall_poor7.png)','background-size':'100% 100%',}">
			<view class="swiper w100 h-520 radius-36 overhid">
				<u-swiper :list="desc.goods_list" keyName="adimage" height="520rpx" @click="photo" @change="swiperindex"
					interval="6000" circular indicator bgColor="rgba(0,0,0,0)" :current="shopname"></u-swiper>
			</view>
			<view class="titie one-line padding-top-20 padding-left-12 padding-right-12">
				{{desc.goods_list[shopname].goods_name}}
			</view>
			<view class="flex-between padding-left-12  padding-top-25">
				<view class="price">
					<view class="font-40 red">
						￥{{desc.price}}
					</view>
				</view>

				<view class="font-22" style="text-align: right;color: #7D7470;">
					共: {{desc.number}}件
				</view>
			</view>

			<view class="padding-top-160 padding-left-15">
				<scroll-view scroll-y class="w100" scroll-with-animation style="max-height: 320rpx;overflow: hidden;">
					<view class="w-167 h-230 radius-10  margin-bottom-20 bagitem"
						style="float: left;position: relative;" v-for="(it,idx) in desc.goods_list" :key="idx"
						@click="chswiper(idx)"
						:style="{background:'url('+Imgbase+'/new_goodpoord_img3.png)','background-size':'100% 100%',}">
						<image class="w100 h-150 radius-10" style="border: 4rpx solid #8A5E51;" :src="it.adimage"
							mode="aspectFill">
						</image>

						<view class="w100 one-line font-20 padding-left-10 padding-right-10">
							{{it.goods_name}}
						</view>

						<view class="w100  padding-left-10 padding-right-10 font-20 padding-top-10">
							数量： {{it.num}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="pay text-center padding-top-20">
			<view class="w-200 margin-auto padding-bottom-25">
				<u-button v-if="desc.can_recall == 1" type="error" text="撤回" size="small" @click="cheshow = true"></u-button>
			</view>

			<image  v-if="desc.status == 1" @click="payshows" class="w-310 h-90" :src="Imgbase + '/new_goodmall_poor3.png'" mode="aspectFit">
			</image>
		</view>

		<!-- 撤回弹出框 -->
		<u-modal :show="cheshow" :title="chetitle" :content='checontent' cancelText="取消" showCancelButton
			confirmColor="#F56C6C" @cancel="checlose" @confirm="cheplay"></u-modal>


		<!-- 立即支付 -->
		<view class="">
			<u-popup :show="payshow" @close="closes" @open="opens" :safeAreaInsetBottom="false" :round="62">
				<view class="pays radius-62">

					<view class="w-630 margin-auto padding-20" style="color: #8B5F52;"
						:style="{background:'url('+Imgbase+'/new_goodmall_poor5.png)','background-size':'100% 100%',}">
						<view class="flex-between padding-10" style="border-bottom: 4rpx solid  #9f6c5e;">
							<view class="">
								<text>账户余额</text>
							</view>
							<view class="">
								<text>￥{{descm.money}}</text>

							</view>
						</view>

						<view class="flex-between padding-10" style="border-bottom: 4rpx solid  #9f6c5e;">
							<view class="">
								勇者币
							</view>
							<view class="df alc">
								{{Math.floor(coupon * 1000) / 100}} (可抵值{{ Math.floor(coupon * 100) / 100}})
								<view class="black one_worp padding-left-30">
									<u-switch v-model="values" size="20" active-color="#19BE6B"
										@change="changes"></u-switch>
								</view>
							</view>
						</view>


						<view class="flex-between padding-10">
							<view class="">
								积分
							</view>
							<view class="df alc">
								{{score}} (可抵值{{score/10}})
								<view class="black one_worp padding-left-30">
									<u-switch v-model="valuesco" size="20" active-color="#19BE6B"></u-switch>
								</view>
							</view>
						</view>
					</view>
					<view class="text-center padding-top-25">
						<image class="w-425 h-72" :src="Imgbase + '/new_goodmall_poor4.png'" mode="aspectFit"
							@click="pay"></image>
					</view>
				</view>
			</u-popup>
		</view>



		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import md5 from '@/utils/md5.js'
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				id: 0,
				desc: '',
				value: 1,
				show: false,
				radioValue: '',
				detail: '暂无地址',
				address_id: '',
				payshow: false,
				coupon: '',
				values: false,
				valueshong: false,
				valuesco: false,
				prices: '',
				couponk: 0,
				losshong: 0,
				scores: '',
				content: '',
				paytype: 0,
				code: 0,
				loss: 0,
				descm: [],
				modalName: null,
				score: 0,
				noteshow: false,
				notetext: '',
				version: 0,
				sku_list: [],
				skunum: 0,
				shopname: 0,
				cheshow: false,
				chetitle: '提示',
				checontent: '确认要撤回中古交易吗？'
			}
		},
		onLoad(e) {
			this.id = e.id
			this.code = e.code
		},
		onShow() {
			if (uni.getStorageSync('token') == '') {
				this.$uniApi.trylogin();
			}
			this.gooddesc()
			this.userFront()
		},
		methods: {
			// 撤回弹出框确定按钮 api/shop/userRecall
			async cheplay() {
				let _this = this
				let item = await this.$api.post('shop/userRecall', {
					token: uni.getStorageSync('token'),
					id: _this.id
				})
				uni.showToast({
					icon: 'none',
					title: item.msg
				});
				this.cheshow = false
				this.gooddesc()
				this.userFront()
			},
			// 关闭撤回弹出框
			checlose() {
				this.cheshow = false
			},
			chswiper(index) {
				if (this.shopname == index) {
					this.photo(index)
				} else {
					this.shopname = index
				}
				console.log(this.shopname)
			},
			swiperindex(index) {
				this.shopname = index.current
			},
			skyplay(i) {
				this.skunum = i
			},
			bindTextAreaBlur: function(e) {
				this.notetext = e.detail.value
			},
			noteclose() {
				this.noteshow = false
			},
			gobape() {
				uni.switchTab({
					url: '/pages/goodspoor/backpack'
				})
			},
			// 收藏
			async islike(e, index) {
				let _this = this
				let item = await this.$api.post('shop/goodCollect', {
					token: uni.getStorageSync('token'),
					id: this.id
				})
				this.gooddesc()
				uni.showToast({
					icon: 'none',
					title: item.data.tip
				});
			},
			hideModal(e) {
				this.modalName = null
			},
			onGetPhoneNumber(e) {
				let _this = this;
				wx.login({
					success(res) {
						uni.request({
							url: _this.$globals.apibase + '/api/Minlogin/getPhoneNumber',
							data: {
								token: uni.getStorageSync('token'),
								code: res.code,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv,
								ver: _this.$mpVer
							},
							method: 'POST',
							header: {
								'content-type': 'application/json'
							},
							success: (res) => {
								if (res.data.code == '1') {
									_this.userFront()
									uni.showToast({
										icon: 'none',
										title: '授权成功!',
										duration: 1500,
									});

									setTimeout(() => {
										_this.payshow = true
									}, 1500)

								} else {
									uni.showToast({
										icon: 'none',
										title: '授权失败!',
										duration: 3000,
									});
								}
								_this.modalName = null
							}
						});
					}
				})
			},
			payshows() {
				let _this = this;

				// 判断有无绑定手机号
				if (this.descm.mobile == '') {
					this.$refs.uToast.show({
						message: "请先绑定手机号",
						duration: 1500,
					})
					setTimeout(() => {
						_this.modalName = 'getPhoneNumber';
					}, 1500)
					return
				}

				this.payshow = true
			},
			changes(e) {
				if (e) {
					this.couponk = 1
					if (parseFloat(this.coupon) >= parseFloat(this.prices)) {
						this.prices = 0
					} else {
						this.prices = parseFloat(this.prices - parseFloat(this.coupon))
					}
				} else {
					// this.prices = parseFloat(this.prices + parseFloat(this.coupon))
					if (this.losshong == 1) {
						if (this.desc.price - this.loss / 10 < 0) {
							this.prices = this.desc.price
							console.log(456456)
						} else {
							this.prices = this.desc.price - this.loss / 10
							console.log(123123)
						}
					} else {
						this.prices = this.desc.price
						console.log(789789)
					}
					this.couponk = 0
				}
			},
			changeshong(e) {
				if (e) {
					this.losshong = 1
					if (parseFloat(this.loss / 10) >= parseFloat(this.prices)) {
						this.prices = 0
					} else {
						this.prices = parseFloat(this.prices - parseFloat(this.loss / 10))
					}
				} else {
					// this.prices = parseFloat(this.prices + parseFloat(this.loss/10))

					// this.prices = parseFloat(this.desc.price - parseFloat(this.coupon))

					if (this.couponk == 1) {
						if (this.desc.price - this.coupon < 0) {
							this.prices = this.desc.price
						} else {
							this.prices = this.desc.price - this.coupon
						}
					} else {
						this.prices = this.desc.price
					}
					this.losshong = 0
				}
			},
			userFront() {
				let _this = this
				uni.request({
					url: _this.$globals.apibase + '/api/Userways/userFront',
					data: {
						token: uni.getStorageSync('token'),
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						_this.descm = res.data.data.user_desc
						_this.coupon = res.data.data.user_desc.coupon / 10;
						_this.loss = res.data.data.user_desc.loss;
						_this.score = res.data.data.user_desc.score;
					}
				});
			},
			gomodify() {
				uni.navigateTo({
					url: '/pages/index/address'
				})
			},
			closeshow() {
				this.show = false
			},
			back() {
				uni.navigateBack()
			},
			opens() {
				// console.log('open');
			},
			closes() {
				this.payshow = false
				// console.log('close');
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			address() {
				this.show = true
			},
			valChange(e) {
				this.prices = e.value * this.desc.price
				this.scores = e.value * this.desc.score
				// console.log('当前值为: ' + e.value)
			},
			// 立即支付
			pay() {
				let _this = this;
				let str = _this.$uniApi.mdnum();
				var md5Str = md5.hex_md5(str[1])
				uni.request({
					url: this.$globals.apibase + '/api/shop/userGoodsBuy',
					data: {
						token: uni.getStorageSync('token'),
						use_coupon: _this.values ? 1 : 0, // 是否使用欧券 1：是    0：否
						use_score: _this.valuesco ? 1 : 0, // 是否使用积分1：是    0：否
						id: _this.id,
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						_this.payshow = false
						if (res.data.code == 0) {
							_this.$refs.uToast.show({
								message: res.data.msg
							})
						} else {
							_this.paytype = 0
							_this.gooddesc()
							this.$refs.uToast.show({
								message: res.data.msg
							})
						}
						if (res.data.data.state == 0) {
							_this.paytype = 0
							uni.requestPayment({
								timeStamp: res.data.data.result.timeStamp,
								nonceStr: res.data.data.result.nonceStr,
								package: res.data.data.result.package,
								signType: res.data.data.result.signType,
								paySign: res.data.data.result.paySign,
								success: function(result) {
									console.log(123123132123)
									let str = _this.$uniApi.mdnum();
									var md5Str = md5.hex_md5(str[1])
									uni.request({
										url: _this.$globals.apibase +
											'/api/shop/exchangeGoodv2',
										data: {
											token: uni.getStorageSync('token'),
											use_coupon: _this.values ? 1 :
											0, // 是否使用欧券 1：是    0：否
											use_loss: _this.valueshong ? 1 :
											0, // 是否使用红豆1：是    0：否
											use_score: _this.valuesco ? 1 :
											0, // 是否使用积分1：是    0：否
											id: _this.id,
											number: _this.value, // 购买数量
											address_id: _this.address_id, //地址id
											type: 0, // 支付方式0微信1支付宝
											nonce: str[2],
											sign: md5Str,
											timestamp: str[0],
											ver: _this.$mpVer,
											mark: _this.notetext,
											sku_id: _this.version == 2 ? _this.sku_list[
												_this
												.skunum].id : '' // 多规格id
										},
										method: 'POST',
										header: {
											'content-type': 'application/json'
										},
										success: (res) => {
											_this.paytype = 1
											_this.payshow = false
											if (res.data.code == 0) {
												_this.$refs.uToast.show({
													message: res.data.msg
												})
											}
											if (res.data.data.state == 0) {
												_this.paytype = 0

											} else {
												_this.paytype = 0
												_this.gooddesc()
												_this.$refs.uToast.show({
													message: "支付成功，请在赏袋已下单中查看"
												})
											}
										}
									});
								},
								fail: (res) => {},
								cancel: (res) => {},
							})
						} else {
							_this.paytype = 0
							_this.gooddesc()
							this.$refs.uToast.show({
								message: res.data.msg
							})
						}
					}
				});
			},
			payout(trade) {
				let _this = this;

			},
			// 预览图片
			photo(index) {
				let _this = this
				let arr = []
				arr.push(_this.desc.goods_list[index].adimage)
				uni.previewImage({
					// current: 1,
					urls: arr,
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							console.log(data)
							// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data
							// 	.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 获取商品详情
			gooddesc() {
				let _this = this
				uni.request({
					url: this.$globals.apibase + '/api/shop/userGoodsDetail',
					data: {
						token: uni.getStorageSync('token'),
						id: _this.id

					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						this.desc = res.data.data.info
						console.log(this.desc)
					}
				});
			},
		},
		onReachBottom() {
			uni.$emit('onReachBottom');
		},
		//分享功能
		onShareAppMessage(res) {
			let _this = this;
			return {
				title: _this.desc.name,
				path: '/pages/index/detail?id=' + _this.id + '&code=1',
				imageUrl: 'https://yzcos.oqzhs.cn/brave/yonglogo.png',
			}
		},

	}
</script>

<style lang="scss">
	.bagitem {
		margin-right: 30rpx;
	}

	.bagitem:nth-child(3n) {
		margin-right: 0;
	}

	.btnshare::after {
		border: none;
	}

	.skuon {
		color: #8A5E51;
		border: 4rpx solid #8A5E51;
		background-color: rgba(138, 94, 81, .2);
	}

	.skuoff {
		color: #7D7D7D;
		border: 4rpx solid #EBEBEB;
		background-color: #EBEBEB;
	}

	.notes {
		background-color: rgba(138, 94, 81, .2);

		.text1 {
			color: #5d5d5d;
		}
	}

	.item_d {
		width: 600rpx;
		background-color: rgba(138, 94, 81, .2);
		border-radius: 15rpx;
		margin: 30rpx auto;
	}

	.red {
		color: red;
	}

	.item_detail {
		padding: 20rpx;
		margin-top: 20rpx;
		font-weight: bold;
		margin-bottom: 160rpx;

		.title {
			margin-bottom: 20rpx;
		}
	}

	.pays {
		// height: 700rpx;
		padding: 50rpx 30rpx;
		background-color: #FCF4F1;

		.top {
			display: flex;
			font-weight: bold;
			font-size: 36rpx;

			.img {
				width: 220rpx;
				height: 220rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.price {
				color: #E60000;
				margin-bottom: 20rpx;
			}

			.text {
				width: 480rpx;
				color: #333;
				padding-left: 10rpx;
				font-size: 30rpx;
			}
		}

		.btn {
			padding-top: 30rpx;
			width: 80%;
			margin: 0 auto;

			image {
				width: 100%;
			}
		}

		.bot {
			padding-top: 20rpx;

			.item {
				width: 100%;
				padding: 15rpx 25rpx;
				background-color: #F4F4F4;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #817f7f;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.price {
					color: #F66055;
				}

				.black {
					max-width: 500rpx;
					color: #363535;
				}
			}
		}
	}

	.swiper {
		border: solid 6rpx #8a5e51;
	}

	.add {
		height: 1200rpx;
		background-color: #FCF4F1;
		border-radius: 55rpx;
		padding-top: 50rpx;

		.title {
			position: relative;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;

			.close {
				position: absolute;
				right: 50rpx;
				top: 0;
			}
		}

		.text_right {
			width: 100%;
			height: 50rpx;
			line-height: 50rpx;
			text-align: right;
			padding-right: 60rpx;
			margin-top: 30rpx;
			color: #0375EE;
		}

		.ress {
			width: 94%;
			margin: 10rpx auto 0;
			background-color: #F2E6E3;
			border-radius: 15rpx;

			.ress_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				padding: 30rpx;
				width: 100%;
				// border-top: 1rpx solid #eee;

				.icon {
					width: 80rpx;
					height: 80rpx;
					background-color: #ffdfcf;
					border-radius: 40rpx;
					text-align: center;
					line-height: 80rpx;
					color: #d5564d;
				}

				.infors {
					width: 83%;

					.top {
						display: flex;
						align-items: center;
					}

					.name {
						max-width: 230rpx;
						font-size: 34rpx;
						font-weight: bold;
						margin-right: 15rpx;
					}

					.phone {
						color: #bcbcbc;
					}

					.bot {
						width: 100%;
						margin-top: 10rpx;
						display: flex;
						justify-content: space-between;
					}

					.moren {
						margin-left: 10rpx;
						font-size: 20rpx;
						padding: 5rpx;
						text-align: center;
						border-radius: 10rpx;
						color: #F66055;
						border: 1px solid #F66055;
					}
				}
			}
		}

		.btn {
			width: 90%;
			margin: 20rpx auto 0;
			border-radius: 50rpx;
			overflow: hidden;
		}
	}
</style>